<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="2000">
			<view class="title-box">
				<text>营销活动</text>
			</view>
		</z-nav-bar>
		<!-- 顶部 -->
		<u-sticky :offsetTop="offsetTop">
			<view class="topWrapper">
				<view class="searchBox">
					<view class="search">
						<u-search v-model="queryParam.activityName" :showAction="true" actionText="搜索"
							@custom="getActivityList()"></u-search>
					</view>
				</view>
				<!-- 标签 -->
				<u-tabs :scrollable="false" :list="list" ref="tabs" :current="current" @change="tabChange"></u-tabs>
			</view>
		</u-sticky>

		<!-- 活动列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="activityList">
				<view v-for="(item,index) in data" :key="index">
					<view class="ac_container" @click="goActivityDetail(item.activityId)">
						<image class="image" :src="formatImage(item.listPictures)" mode=""></image>
						<view class="info">
							<text>{{item.activityName}}</text>
							<text>{{item.startTime}} — {{item.endTime}}</text>
							<view class="bottomView">
								<text class="status">{{item.activityStatus|activityStatus}}</text>
								<!-- <text class="btn" @click.stop="goActivityDetail(item.activityId)">去分享</text> -->
							</view>

						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<HomeTabbar :tab="tabIndex"></HomeTabbar>
	</view>
</template>

<script>
	import HomeTabbar from '@/components/tabbar/tabbar';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import * as api from '@/api/activity.js';
	import settings from '@/settings.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			HomeTabbar
		},
		data() {
			return {
				data: [],
				offsetTop: 0,
				inputValue: "",
				current: 0,
				queryParam: {
					activityName: "",
					activityStatus: 2
				},
				list: [{
						name: '进行中',
						status: 2
					},
					{
						name: '未开始',
						status: 1
					},
					{
						name: '已结束',
						status: 4
					},
					{
						name: '已暂停',
						status: 3
					}
				],
			}
		},
		computed: {
			navigationList() {
				return this.$store.state.initData.initData.navigationList;
			},
			tabIndex() {
				var tabIndex = -1;
				this.navigationList.map((item, index) => {
					if (item.name == "营销管理") {
						tabIndex = index;
					}
				})
				return tabIndex;
			}
		},
		onLoad() {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			})
			// #endif

			this.getActivityList();
		},
		methods: {
			tabChange(e) {
				this.current = e.index;
				this.queryParam.activityStatus = this.list[e.index].status
				this.getActivityList()
			},
			getActivityList() {
				api.activityList(this.toParams(this.queryParam)).then(res => {
					this.data = res.rows
				})
			},
			goActivityDetail(activityId) {
				uni.navigateTo({
					url: './activity-detail?activityId=' + activityId
				})
			},
			formatImage(url) {
				return settings.baseImageUrl + url;
			},
			upCallback(page) {
				var param = {
					...this.queryParam,
					pageNum: page.num,
					pageSize: page.size,
				}
				api.activityList(this.toParams(param)).then(res => {
					//设置列表数据
					if (page.num == 1) this.data = []; //如果是第一页需手动制空列表
					this.data = this.data.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
				this.mescroll.endSuccess();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.city {
				font-size: 30upx;
				font-weight: bold;
				color: #333;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				// background-color: #ededed;
				border-radius: 8upx;
			}
		}
	}

	.activityList {
		margin: 20rpx;
	}

	.ac_container {
		width: 100%;
		height: 240rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0 0 68rpx 0 rgba(69, 69, 69, 0.13);
		display: flex;
		margin-bottom: 20rpx;

		.image {
			background-color: #666666;
			width: 320rpx;
			height: 240rpx;
		}

		.info {
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 32rpx 20rpx;
			color: #333;
			text-align: right;

			text:nth-child(1) {
				font-size: 30rpx;
				font-weight: bold;
			}

			text:nth-child(2) {
				width: 290rpx;
				height: 44rpx;
				line-height: 44rpx;
				align-self: flex-end;
				text-align: center;
				background-color: #ECECEC;
				border-radius: 4rpx;
				font-size: 20rpx;
				margin-top: 20rpx;
			}

			.bottomView {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.status {
					color: #666666;
					font-size: 20rpx;
				}

				.btn {
					width: 122rpx;
					height: 42rpx;
					line-height: 42rpx;
					border: 1px solid #333333;
					border-radius: 22rpx;
					color: #333;
					font-size: 22rpx;
					align-self: flex-end;
					text-align: center;
					margin-top: 10rpx;
					background-color: #fff;
				}
			}



		}
	}
</style>